<template>
	<view>
	<u-loading style="position: absolute;top:100px;left:0;right:0;margin:auto;" :show="loading" ></u-loading>
	<view v-if="!loading">
	<!-- 提示弹窗 -->
    <u-top-tips ref="uTips" navbar-height="0"></u-top-tips>
	<!-- 头部 -->
	
	<view class="header">
	<!-- animation-shake -->
	<view style="" class="background">
		<!-- <image class="" src="http://upimg.firebug.xyz/resourse/%E6%A1%8C%E9%9D%A26.jpg" binderror="" bindload=""></image> -->
		<image class="" src="http://image.glowworm.club/resourse/%E6%A1%8C%E9%9D%A26.jpg" binderror="" bindload=""></image>
	</view>
	<view class="user-info">
		<span class="iconfont iconrenzheng1" :style="userInfo.authentication?'color:#ff9b57':'color:#0095d9'"></span>
		<!-- <span class="iconfont iconrenzheng4"></span> -->
		<view class="user-avatar-container ">
			<view class="open-data-avatar">
				<img v-if="userInfo.userAvatar==''" src="../../static/images/avatar.jpeg" width="100%" height="100%"/>
				<img v-else :src="userInfo.userAvatar" alt="" width="100%" height="100%">
			</view>
			<view class="ripple-bg"></view>
			<view class="ripple-bg" style="animation-delay: 2s;"></view>
			<view class="ripple-bg" style="animation-delay: 4s;"></view>
		</view>
		<view class="user-name ">
			<!-- <open-data class="white-title" type="userNickName"></open-data> -->
			<!-- <view class="white-title">{{ nickname }} <text class="iconfont iconrenzheng4 {{ authentication?'active':'active_1' }} " ></text> </view> -->
			<view class="white-title user-nickname">{{ userInfo.nickname==''?'未登录':userInfo.nickname }}</view>
			<view  class="white-text">{{rolesLength>0?userInfo.roles[0].name:$store.state.isTourist?'':"普通用户"}}</view>
			<view @click="goLogin" v-if="userInfo.nickname==''?true:false" style="color:#84adfb;display: inline;font-size:28rpx;text-decoration:underline">去登陆</view>
		</view>
	</view>
</view>
<!-- 主要导航按钮 -->
<!-- <view class="main-item" hover-class="none" hover-stop-propagation="false"> -->
	<view class="main-item" hover-class="none">
	<!-- <view class="row-nav-item" hover-class="none" hover-stop-propagation="false"> -->
		<view class="row-nav-item" hover-class="none">
		<view class="item" @click="goPage('/pages/my/myNews')">
			<!-- <iconfont size="100" name="iconshuoshuo" /> -->
			<span class="iconfont iconshuoshuo" style="color:#000;font-size:38px"></span>
			<view class="item-text">与我相关</view>
		</view>
		<view class="item" hover-class="none" @click="goPage('/pages/my/myInfo')">
			<view class="rotate-icon">
				<span class="iconfont iconshezhi" style="color:#000;font-size:38px"></span>
			</view>
			<view class="item-text">设置</view>
		</view>
		<view class="item" @click="exitLogin=true">
			<!-- <iconfont size="100" name="iconzhuxiao2" /> -->
			<span class="iconfont iconzhuxiao2" style="color:#000;font-size:38px"></span>
			<view class="item-text">退出</view>
		</view>
	</view>
</view>
<!-- 菜单列表 -->
<view class="cu-list menu my-menu-list card-menu margin-top">
	<view class="cu-item arrow " v-if="isadministrators">
		<navigator class="content" url="../AdminControl/AdminControl" open-type="navigate">
			<text class="iconfont iconquanxian1 text-olive"></text>
			<text class="text-orange">管理员入口</text>
		</navigator>
	</view>
	<view class="cu-item  arrow">
		<view class="content" hover-class="none" @click="goPage('/pages/my/schoolAccreditation')">
			<text class=" text-olive iconfont iconrenzheng1"></text>
			<text class="text-grey">学校认证</text>
		</view>
	</view>
	<view class="cu-item ">
		<button class="cu-btn content" open-type="contact" @click="comingSoon">
			<text class="iconfont iconkefu text-olive "></text>
			<text class="text-grey">联系客服</text>
		</button>
	</view>
	<view class="cu-item ">
		<button class="cu-btn content" open-type="share" @click="comingSoon">
			<text class="iconfont iconforward text-olive"></text>
			<text class="text-grey">推荐给好友</text>
		</button>
	</view>
	<view class="cu-item ">
		<navigator class="content" hover-class="none" url="../list/list" open-type="redirect" data-target="join" @click="showModal">
			<text class="iconfont iconwomen text-olive"></text>
			<text class="text-grey">加入我们</text>
		</navigator>
	</view>
	<view class="cu-item arrow">
		<navigator class="content" hover-class="none" url="/pages/my/aboutUs">
			<text class="iconfont iconguanyu1 text-olive"></text>
			<text class="text-grey">关于我们</text>
		</navigator>
	</view>
</view>
<!-- 加入我们 模态框 -->
<view :class="modalName=='join'?'show cu-modal':' cu-modal'" @click="hideModal">
	<view class="cu-dialog" catchtap="true">
		<view class="cu-bar bg-white justify-end">
			<view class="content text-bold">加入我们</view>
		</view>
		<view class="">
				<view class="cu-form-group" @click="copyText" :data-text="qq">
				<view class="title">负责人QQ：</view>
				{{qq}}(点击复制)
			</view>
				<view class="cu-form-group" @click="copyText" :data-text="qqun">
				<view class="title">交流Q群：</view>
				{{qqun}}(点击复制)
			</view>
			<view class="cu-form-group">
				<view class="title">紧缺人才：</view>
				<text>美工/前端/后端/运维</text>
			</view>
			<view class="cu-form-group">
				<view class="title">技能需求：</view>
				<text>有手就行,来者不拒</text>
			</view>
		</view>
	</view>

</view>
<!-- 是否确认退出登录 -->
<u-modal v-model="exitLogin" content="是否要退出" @cancel="exitLogin=false" @confirm="logout" show-cancel-button></u-modal>
</view>
	</view>
</template>

<script>
import {getUserInfoUsingGET,getWelinkUserInfo} from "/common/api/user";
export default {
	data(){
		return{
		isadministrators: false,
		modalName:null,
		qq: '2711983498',
		qqun: '246326392',
		exitLogin:false,
		rolesLength:0,
		timer:null,
		loading:true,
		userInfo:{
			authentication: false,
			nickname:'',
			userAvatar:'',
			roles:null
		},
	}
  },
	onLoad(){
		this.getUserInfo()
	},
	destroyed(){
		//清除定时器
		clearTimeout(this.timer)
	},
methods:{
	goPage(page){
		if(!wx.getStorageSync("token")&&!wx.getStorageSync("welinkToken")){
			this.$refs.uTips.show({
				title: '快去登录吧～',
				type: 'primary',
			})
			 this.timer=setTimeout(function(){
				uni.navigateTo({
					url: '/pages/login/index'
				});
			},1000)
			return
		}
		uni.navigateTo({
			url: page
		});
	},
	//获取用户信息
	getUserInfo(){
		// 判断是否是游客
		if(!wx.getStorageSync("token")&&!wx.getStorageSync("welinkToken")){
			this.$store.commit('changeState', {
					key:'isTourist', 
					value:true
				})
			this.loading=false
			return
		}else if(wx.getStorageSync("welinkToken")){
			// 获取welink用户信息
				getWelinkUserInfo({'userId':wx.getStorageSync("userId")}).then(res=>{
					if(res.data.code=='0'){
						this.$store.commit('changeState', {
						key:'welinkUserInfo', 
						value:res.data
					})
					this.userInfo.nickname=this.$store.state.welinkUserInfo.userNameCn
					}else{
						this.$refs.uTips.show({
							title: '请先本地登录',
							type: 'error',
						});
						setTimeout(()=>{
							uni.navigateTo({
								url: "/pages/login/index" 
							});
						},3000)
					}
				}).catch(error=>{
					this.$refs.uTips.show({
						title: error.data.message,
						type: 'error',
					});
				})
			this.loading=false
			return
		}
		getUserInfoUsingGET().then(res=>{
			this.$store.commit('changeState', {
					key:'userInfo', 
					value:res.data.data
				})
			this.userInfo.authentication=this.$store.state.userInfo.authentication
			this.userInfo.nickname=this.$store.state.userInfo.nickname
			this.userInfo.userAvatar=this.$store.state.userInfo.userAvatar
			this.userInfo.roles=this.$store.state.userInfo.roles	
			this.rolesLength=this.$store.state.userInfo.roles.length
			this.loading=false
		})
	},
	comingSoon(){
		this.$refs.uTips.show({
			title: '敬请期待',
			type: 'primary',
		})
	},
	showModal(e) {
		this.modalName=e.currentTarget.dataset.target
	},
	hideModal(e) {
		this.modalName=null
	},
	copyText(e) {
		wx.setClipboardData({
			data: e.currentTarget.dataset.text,
			success: function(res) {
				wx.getClipboardData({
					success: function(res) {
						wx.showToast({
							title: '复制成功'
						})
					}
				})
			}
		})
	},
	// 回到登录页面
	goLogin() {
		wx.navigateTo({
			url: '/pages/login/index',
			success: (result) => {
				console.log(result);
			},
			fail: function(res) {
				console.log(res)
			}

		});
	},
	// 退出登录主
	logout() {
		try {
			wx.clearStorageSync()
			this.$store.commit('changeState', {
				key:'userInfo', 
				value:{}
			})
			// wx.removeStorageSync('schInfo');
			// wx.removeStorageSync('userInfo');
			this.isadministrators=false
			this.exitLogin=false
		} catch (e) {
			// Do something when catch error
		}
		this.goLogin()
	},
	}
	
}
</script>

<style lang="scss" scoped>
.header{
	
	 .background {
  width: 750rpx;
  height: 600rpx;
  position: absolute;
  z-index: -9;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  -webkit-filter: blur(3rpx);
  -moz-filter: blur(3rpx);
  -o-filter: blur(3rpx);
  -ms-filter: blur(3rpx);
  filter: blur(3rpx);
  overflow: hidden;
  box-shadow: 10rpx 10rpx 10rpx #a7a7a7;
	image {
	width: 100%;
	height: 600rpx;
	}
}
// .main-item{
// 	.icon-item::before{
// 		// font-size: 56px;
// 		width: 40px;
// 		color: #000!important;
// 	}
// }
.user-info {
	
  display: flex;
  padding: 0 100rpx;
  flex-direction: row-reverse;
  padding-top: 150rpx;
  position: relative;
  color: #fff;
  z-index: 100;
  .open-data-avatar {
  width: 190rpx;
  height: 190rpx;
  border-radius: 50%;
  border: 10rpx solid rgba(255, 255, 255, 0.5);
  overflow: hidden;
}
.user-avatar-containner {
  position: absolute;
  flex: 1;
}
.user-name {
  flex: 1;
  font-size: 30rpx;
		.user-nickname {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		}
	}
		.ripple-bg {
		background: rgba(255, 255, 255, 0.3);
		width: 190rpx;
		height: 190rpx;
		border-radius: 50%;
		position: absolute;
		top: 150rpx;
		z-index: -1;
		animation: living 6s linear infinite;
		}
	}
}
@keyframes living {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}
.main-item {
  width: 750rpx;
}
.main-item .row-nav-item {
  margin: 50rpx 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #8799a3;
  font-size: 30rpx;
  font-weight: 600;
}
.main-item .row-nav-item .item {
  z-index: 555;
  flex: 1;
}
.main-item .row-nav-item .item .item-text {
  margin-top: 10rpx;
  color: #fff;
}
.main-item .row-nav-item .item .rotate-icon {
  animation: rotateSetting 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes rotateSetting {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(90deg);
  }
  50% {
    transform: rotate(180deg);
  }
  75% {
    transform: rotate(270deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.my-menu-list {
  margin-top: 105rpx;
}
.my-menu-list .cu-item {
  height: 100rpx;
}
.my-menu-list .cu-item .iconfont {
  font-size: 50rpx;
  margin-right: 35rpx;
}
.my-menu-list .cu-item text {
  font-size: 35rpx;
}
.van_dialog {
  z-index: 980;
}
</style>>

